<template>
      <!-- 用 el-menu 实现导航菜单 -->
      <el-menu mode="horizontal">
        <el-menu-item index="1">
          <!-- 在页面上使用 router-link 组件渲染 超链接 -->
          <router-link to="/home">主页</router-link>
        </el-menu-item>
        <!-- "基础"子菜单开始 -->
        <el-sub-menu index="basic">
          <template #title>基础</template>
          <el-menu-item index="basic-1">
            <router-link to="/basic?id=11&username=sanfeng">
              使用QueryString传递参数(直接在路径中指定参数)
            </router-link>
          </el-menu-item>
          <el-menu-item index="basic-2">
            <!-- 为 to 绑定一个对象，其中 name 表示`路由记录`的名称，而 query 则表示通过 query string 传递的参数 -->
            <router-link :to="{ name: 'basic', query: { id: 22, username: 'junbao' } }">
              使用QueryString传递参数(为to绑定对象)
            </router-link>
          </el-menu-item>
        </el-sub-menu><!-- "基础"子菜单结束 -->
        <el-menu-item index="3">
          <router-link to="/advanced">高级</router-link>
        </el-menu-item>
        
        <el-sub-menu index="beginer">
          <template #title>进阶</template>
          <el-menu-item index="beginer-1">
            <router-link to="/beginner">不带参数</router-link>
          </el-menu-item>
          <el-menu-item index="beginer-2">
            <router-link to="/beginner/9527">带参数()</router-link>
          </el-menu-item>
        </el-sub-menu>

        <!-- 定义"介绍"子菜单 -->
        <el-sub-menu index="introduction">
          <!-- 通过插槽分发"子菜单标题"中显示的内容 -->
          <template #title>介绍</template>
          <!-- 仍然采用 el-menu-item 来添加菜单项 -->
          <el-menu-item index="introduction-1">
            <router-link to="/introduction/RespJone">瑞斯棒姜</router-link>
          </el-menu-item>
          <el-menu-item index="introduction-2">
            <router-link to="/introduction/WenCaiGe">文采哥</router-link>
          </el-menu-item>
           <el-menu-item index="introduction-3">
            <router-link :to="{ name: 'introduction' , params: { name: '拆二代' } }">拆二代</router-link>
          </el-menu-item>
        </el-sub-menu><!-- "介绍"子菜单结束 -->
      </el-menu><!-- 导航菜单结束 -->
</template>

<script>
/* eslint-disable */
export default {
    name: 'Header'
}
</script>

<style>

</style>